<template>
	<div class="groups_video">
		<video :ref="'videoitem_'+index" playsinline="" :poster="media.videoimg" preload="none" :src="media.videosrc" type="video/mp4" v-for="(media, mediaindex) in item.videos" :class="'videoitem_'+index" @click="playClickHandle"></video>
		<span class="playbutton" @click="videoPlayHandle" :data-index="index" v-if="!isPlaying"></span>
	</div>
</template>
<script>
	export default{
		name:"groups_video",
		data:function(){
			return {
				currentPlayerElement:null,
				isPlaying:false
			}
		},
		props:["index", "item"],
		mounted:function(){
			const that = this;
			const video = that.getCurrentElement();
			$(window).on("scroll", function(e){
				that.scrollHandle.call(this,e, video)
			});
		},
		watch:{
			currentPlayerElement:function(){
				const that = this;
				const video = that.getCurrentElement();
				$(window).off("scroll", function(e){
					that.scrollHandle.call(this,e, video)
				}).on("scroll", function(e){
					that.scrollHandle.call(this,e, video)
				});
			}
		},
		methods:{
			scrollHandle: function(e, video){
				const self = this;
				self.timeout && clearTimeout(self.timeout);
				self.timeout = setTimeout(function(){
					if (video){
						const winTop = $(document).scrollTop(),
							playElemTop = $("."+video.className).offset().top,
							playElemHeight = $("."+video.className).height(),
							winHeight = screen.height;
						if (playElemTop+playElemHeight<winTop||playElemTop>winTop+winHeight){
							video.pause();
						}
					}
				},100);
			},
			getCurrentElement:function(){
				return this.$data.currentPlayerElement;
			},
			eventVideoHandle:function(e){
				console.log(e.type);
				switch(e.type){
					case 'play':
						this.$set(this, "isPlaying", true)
						break;
					case 'pause':
						this.$set(this, "isPlaying", false)
						break;
				}
			},
			videoPlayHandle:function(e){
				const index = e.target.getAttribute("data-index"),
					refElem = this.$refs["videoitem_"+index][0];
				this.$set(this, "currentPlayerElement", refElem);
				!this.$data.isPlaying ? refElem.play() : refElem.pause();
				"loadstart durationchange loadedmetadata loadeddata progress canplay canplaythrough play pause seeking seeked waiting playing timeupdate ended error volumechange stalled ratechange".split(' ').forEach((n) => (refElem.removeEventListener(n, this.eventVideoHandle, false), refElem.addEventListener(n, this.eventVideoHandle, false)));
			},
			playClickHandle:function(e){
				const video = this.getCurrentElement();
				if (video.tagName === 'VIDEO'){
					if(this.$data.isPlaying){
						video.pause();
					}else{
						video.play();
					}
				}
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.groups_video{
		video{
			height:100%;
			width:100%;
			border:0;
			overflow:hidden;
		}
		span{
			&.playbutton{
				background-image: url(../assets/3.png);
				background-repeat: no-repeat;
				background-size: 152px 135px;
				background-position: 0 0;
				margin-top:-67px;
				margin-left:-67px;
				width:135px;
				height:135px;
				left:50%;
				top:50%;
				position: absolute;
			}
		}
	}
</style>